<template>
  <div class="page-content">
    <my-table
      v-bind="contentTableConfig"
      :table-data="pageList"
      v-model:page="pageInfo"
      @selection-change="selectionChange"
      @update:page="updatePageChange"
      :pagetion-total="pageCount"
    >
      <!-- 1. 展示按钮权限 -->
      <template #handle>
        <el-button
          type="primary"
          v-if="handleBtn.createBtn"
          @click="handleCreate"
          >创建</el-button
        >
        <!-- <el-button type="danger" v-if="handleBtn.updateBtn">更新</el-button>
        <el-button type="warning" v-if="handleBtn.deleteBtn">删除</el-button>
        <el-button type="success" v-if="handleBtn.queryBtn">查询</el-button> -->
      </template>

      <!-- 2. 处理时间 -->
      <template #createAt="scope">
        {{ $filter.format(scope.row.createAt) }}
      </template>
      <template #updateAt="scope">
        {{ $filter.format(scope.row.updateAt) }}
      </template>

      <!-- 3. 处理编辑删除 -->
      <template #operates="scope">
        <el-button type="primary" size="small" @click="handleEdit(scope.row)"
          >编辑</el-button
        >
        <el-button type="danger" size="small" @click="handleDelete(scope.row)"
          >删除</el-button
        >
      </template>

      <!-- 4. 动态插入插槽 -->
      <template
        v-for="item in otherPropSlots"
        :key="item.prop"
        #[item.slotName]="scope"
      >
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </template>
    </my-table>
  </div>
</template>

<script>
import { computed, reactive, ref, watch } from "vue";

import useSystemStore from "@/store/system";
import { storeToRefs } from "pinia";

import MyTable from "@/base-ui/table";
import usePermission from "@/hooks/use-permission";

export default {
  components: { MyTable },
  props: {
    contentTableConfig: {
      type: Object,
      required: true,
    },
    pageName: {
      type: String,
      default: "",
    },
  },
  emits: ["handleEdit", "handleCreate"],
  setup(props, { emit }) {
    const store = useSystemStore();
    const handleBtn = reactive({
      createBtn: usePermission(props.pageName, "create"),
      updateBtn: usePermission(props.pageName, "update"),
      deleteBtn: usePermission(props.pageName, "delete"),
      queryBtn: usePermission(props.pageName, "query"),
    });

    const pageInfo = ref({ currentPage: 1, pageSize: 10 });

    watch(pageInfo, () => {
      getPathData();
    });

    const getPathData = (queryInfo = {}) => {
      store.getPageListAction({
        pageName: props.pageName,
        queryInfo: {
          offset: (pageInfo.value.currentPage - 1) * pageInfo.value.pageSize,
          size: pageInfo.value.pageSize,
          ...queryInfo,
        },
      });
    };
    getPathData();

    const pageList = computed(() => store.$state[`${props.pageName}List`]);
    const pageCount = computed(() => store.$state[`${props.pageName}Count`]);

    const selectionChange = (val) => {
      console.log(val);
    };

    const updatePageChange = (val) => {
      // pageInfo.value = val;
      // getPathData();
    };

    const handleCreate = () => {
      emit("createBtnClick");
    };
    const handleEdit = (item) => {
      emit("editBtnClick", item);
    };

    const handleDelete = (item) => {
      store.deletePageData({
        pageName: props.pageName,
        id: item.id,
      });
    };

    // const globalSlotNames = ["createAt", "updateAt", "handler"];
    const otherPropSlots = props.contentTableConfig.listData.filter(
      (item) => item
    );

    return {
      handleBtn,
      pageInfo,
      getPathData,
      selectionChange,
      handleEdit,
      handleDelete,
      handleCreate,
      pageList,
      pageCount,
      otherPropSlots,
      updatePageChange,
    };
  },
};
</script>

<style lang="less" scoped>
:deep(.el-table__cell) {
  position: static !important;
}
</style>
